<template>
  <div class="flex flex-col h-full">
    <div class="h-16">
      <div class="w-[616px] h-full bg-first-title bg-size-full">
        <div class="pl-[60px] text-[40px] text-white font-[YouSheBiaoTiHei]">采购物流数据</div>
      </div>
    </div>
    <div class="flex-1 pt-12 mt-10 px-14 bg-module1-bg bg-size-full">
      <div class="relative h-48">
        <div class="absolute left-0 w-[648px] h-full bg-module1-sub-bg1 bg-size-full">
          <div class="flex items-center h-full">
            <img class="ml-8" :src="Carborne" height="120" />
            <div class="ml-8 h-[140px] flex flex-col justify-between">
              <div class="text-[32px] leading-[44px] text-white">汽运总量 t</div>
              <div class="text-[#37d3dB] text-[84px] leading-none font-[DS-Digital]">39320.32</div>
            </div>
          </div>
        </div>
        <div class="absolute right-0 w-[648px] h-full bg-module1-sub-bg2 bg-size-full">
          <div class="flex flex-row-reverse items-center h-full">
            <img class="mr-8" :src="DockTransport" height="120" />
            <div class="mr-8 h-[140px] flex flex-col justify-between">
              <div class="text-[32px] leading-[44px] text-white">码头调拨总量 t</div>
              <div class="text-[#fe6c7a] text-[84px] leading-none font-[DS-Digital]">12330.42</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-7 h-[88px] flex flex-col justify-between">
        <div class="flex justify-between">
          <div class="text-5xl font-[DS-Digital] text-white">60%</div>
          <div class="text-5xl font-[DS-Digital] text-white">40%</div>
        </div>
        <div>
          <el-progress :percentage="60" :show-text="false" :stroke-width="24" color="#5da9fb" />
        </div>
      </div>
      <div class="mt-[50px] flex items-center">
        <img :src="SecondTitle" height="16" />
        <div class="ml-4 text-white text-[32px] leading-snug">每月采购累计运输进厂量</div>
      </div>
      <div class="h-[460px]">
        <div class="w-full h-full" ref="chart"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Carborne from '@/assets/images/carborne.png';
import DockTransport from '@/assets/images/dock-transport.png';
import SecondTitle from '@/assets/images/second-title.png';
import * as echarts from 'echarts';

onMounted(() => {
  drawFigure();
});

const chart = ref<HTMLDivElement | null>(null);
const drawFigure = () => {
  const myChart = echarts.init(chart.value as HTMLDivElement);
  const options = {
    title: {
      subtext: '单位: t',
      subtextStyle: {
        fontSize: 24,
        color: 'rgba(255,255,255,0.7)'
      }
    },
    grid: {
      top: 60,
      left: 70,
      right: 50,
      bottom: 50
    },
    legend: {
      right: 50,
      data: ['汽运', '码头调拨'],
      textStyle: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 24
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      textStyle: {
        color: 'rgba(255,255,255,0.9)',
        fontSize: 24
      },
      backgroundColor: '#273d96a8',
      formatter: function (params: Record<string, unknown>[]) {
        return `
          <div class="w-48">
            <div class="text-[#37d3db] mb-2">${params[0].name}</div>
            <div class="flex justify-between mb-2">
              <div>${params[0].seriesName}:</div>
              <div>${params[0].value}t</div>
            </div>
            <div class="flex justify-between">
              <div>${params[1].seriesName}:</div>
              <div>${params[1].value}t</div>
            </div>
          </div>
        `;
      }
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 24
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 24
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#314698'
        }
      }
    },
    series: [
      {
        name: '汽运',
        color: '#fe6c7a',
        lineStyle: {
          width: 4
        },
        data: [600, 600, 700, 780, 610, 710, 800, 820, 730, 500, 400, 380],
        type: 'line'
      },
      {
        name: '码头调拨',
        color: '#37d3db',
        lineStyle: {
          width: 4
        },
        data: [400, 550, 420, 600, 750, 700, 700, 670, 610, 580, 520, 520],
        type: 'line'
      }
    ]
  };
  myChart.setOption(options);
};
</script>

<style lang="scss" scoped>
:deep(.el-progress) {
  --el-border-color-lighter: #e56c78;
  .el-progress-bar__outer {
    border: 2px solid #d9d9d9;
    .el-progress-bar__inner {
      border-radius: initial;
    }
  }
}
</style>
